<template>
	<view class="picker_box">
		<view class="picker_title_box" v-if="showCancelBtn||showSubmitBtn">
			<view class="_left" v-show="showCancelBtn" @click="handleCancel()">取消</view>
			<view class="_right" v-show="showSubmitBtn" @click="handleSubmit()">确认</view>
		</view>
		<picker-view v-if="options.length" :value="pickerValue" indicator-class="indicator" @change="handleChange">
			<picker-view-column class="picker-content">
				<view class="picker-item" v-for="(item, index) in options" :key="index">{{ item[rangeKey] }}
				</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		name: "m-picker",
		props: {
			value: Boolean,
			options: Array,
			title: {
				type: String,
				default: ""
			},
			rangeKey: {
				type: String,
				default: "label"
			},
			showCancelBtn: {
				default: true
			},
			showSubmitBtn: {
				default: true
			}
		},
		data() {
			return {
				pickerValue: [0]
			};
		},
		watch: {
			options(curr) {
				this.pickerValue = [0];
				this.$emit("change", this.options[this.pickerValue[0]]);
			}
		},
		methods: {
			// 确定
			handleSubmit() {
				this.$emit("confirm", this.options[this.pickerValue[0]]);
			},
			// 取消
			handleCancel() {
				this.$emit('cancel', false);
			},
			handleChange(e) {
				this.pickerValue = e.detail.value;
				this.$emit("change", this.options[this.pickerValue[0]]);
			},
		}
	}
</script>

<style lang="less" scoped>
	.picker_box {
		width: 100%;
		// max-height: 50vh;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
	}

	.picker_title_box {
		width: 100%;
		// padding: 40rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			font-size: 28rpx;
			color: #858688;
		}

		._right {
			color: #34B9FA;
		}
	}

	/deep/ picker-view {
		background-color: #FFFFFF;
		height: calc(96rpx * 3);

		.picker-item {
			height: 96rpx !important;
			line-height: 96rpx !important;
			text-align: center;
		}

		.indicator {
			height: 96rpx;
		}
	}
</style>